---
menu: Guides
title: Migrate from react-loadable
order: 90
---

# Migrate from react-loadable

Codemods are tools that can help us make changes in our code automatically. Think of it like 'find and replace', but more flexible.

## Usage

```sh
npx loadable-codemod react-loadable-to-loadable-component ./client/src
```

## Caveats

Since `react-loadable` and `@loadable/component` do have differences, it is not possible to make a 100% fully automated codemod to handle all of the change needed.
You still need to set up server-side rendering yourself.

- Updating your server side rendering code to use `ChunkExtractor`
- Updating your webpack configuration to use `@loadable`
- Using `loadableReady` to hydrate your app on the client side.

Please also note that `react-loadable` comes with stuffs like `Loadable.Map`, `pastDelay`, `timedOut`, `delay`, etc that do not exist in `@loadable/components`.
If your code were using those features, you will still need to migrate them manually.

For `loading` placeholder, this codemod already tries to render the loader as usual, but with a mocked up props as follows:

```javascript
{
  pastDelay: true,
  error: false,
  timedOut: false,
}
```

Your app should still works, but this means some of your app logic will be lost because `@loadable/component` simply does not support these features out of the box yet.
